<template>
  <div class="head-root yj">
    <div class="logo">
      <img class="logoimg" width="30" src="../assets/logo.png" />
      <span class="title">百百堡垒机</span>
    </div>
    <div v-show="showMenu" class="nav-menu">
      <NavMenuItem title="首页" type="basic" :isActive="activeName == 'basic'" url="/basic"></NavMenuItem>
      <NavMenuItem v-show="rights.device" title="设备" type="device" :isActive="activeName == 'device'" url="/device"></NavMenuItem>
      <NavMenuItem v-show="rights.audit" title="审计" type="audit" :isActive="activeName == 'audit'" url="/audit"></NavMenuItem>
      <NavMenuItem v-show="rights.team" title="团队" type="team" :isActive="activeName == 'team'" url="/team"></NavMenuItem>
    </div>
    <div v-show="showMenu" @click="onSelf()" class="self">
      <div class="noselect" style="height:20px">{{this.config.user.selfname}}</div>
    </div>
  </div>
</template>

<script>
import NavMenuItem from "~/base/NavMenuItem.vue";

export default {
  name: "Head",
  components: {
    NavMenuItem,
  },
  data() {
    return {
      activeName: "basic",
      showMenu: false,
      rights: {
        audit: false,
        team: false,
        device: false,
      },
    };
  },
  methods: {
    resetRight() {
      this.rights.audit = false;
      this.rights.team = false;
      this.rights.device = false;
    },
    rightMenus() {
      if (
        this.utils.hasRight("browser_audit_video_manger") ||
        this.utils.hasRight("browser_audit_video_list")
      ) {
        this.rights.audit = true;
      }

      if (
        this.utils.hasRight("team_user_manager") ||
        this.utils.hasRight("team_role_manager")
      ) {
        this.rights.team = true;
      }

      if (
        this.utils.hasRight("device_node_select") ||
        this.utils.hasRight("device_node_manager") ||
        this.utils.hasRight("device_device_select") ||
        this.utils.hasRight("device_device_manager")
      ) {
        this.rights.device = true;
      }

      this.config.rights.team_user_manager =
        this.utils.hasRight("team_user_manager");
      this.config.rights.team_role_manager =
        this.utils.hasRight("team_role_manager");
      this.config.rights.device_remotecpe =
        this.utils.hasRight("device_remotecpe");
      this.config.rights.device_node_select =
        this.utils.hasRight("device_node_select");

      this.config.rights.device_node_manager = this.utils.hasRight(
        "device_node_manager"
      );
      this.config.rights.device_device_select = this.utils.hasRight(
        "device_device_select"
      );
      this.config.rights.device_device_manager = this.utils.hasRight(
        "device_device_manager"
      );
      this.config.rights.browser_audit_video_manger = this.utils.hasRight(
        "browser_audit_video_manger"
      );
      this.config.rights.browser_audit_video_list = this.utils.hasRight(
        "browser_audit_video_list"
      );
    },
    onSelf() {
      this.$router.push({ path: "/self", query: {} });
      this.activeName = "none";
    },
    switchMenu(name) {
      this.activeName = name;
    },
    checkToken() {
      const token = this.$cookies.get("token");
      if (!token) {
        this.$router.push({ path: "/login", query: {} });
        return;
      }

      this.utils.http("get", "/webapi/websession/session/get", {}, (resp) => {
        this.config.user = resp;
        this.showMenu = true;
        this.$router.push({ path: "/basic", query: {} });
        this.rightMenus();
      });
    },
    go() {
      this.utils.http("get", "/webapi/welcome/state/get", {}, (data) => {
        if (data == "NO") {
          this.$router.push({ path: "/init", query: {} });
          return;
        }
        this.checkToken();
      });
    },
  },
  mounted() {
    this.utils.on(this._uid, "page_go_login", () => {
      this.$router.push({ path: "/login", query: {} });
    });

    this.utils.on(this._uid, "event_login_complate", () => {
      this.showMenu = true;
      this.$router.push({ path: "/basic", query: {} });
      this.activeName = "basic";
      this.rightMenus();
    });

    this.utils.on(this._uid, "event_login_logout", () => {
      this.showMenu = false;
      this.resetRight();
    });

    this.$router.push({ path: "/loading", query: {} });
    this.go();
  },
  destroyed() {
    this.utils.unon(this._uid, "page_go_login");
    this.utils.unon(this._uid, "event_login_complate");
    this.utils.unon(this._uid, "event_login_logout");
  },
};
</script>

<style>
.head-root {
  z-index: 3;
  background-color: #409eff;
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 50px;
  margin: 5px;
  min-width: 800px;
}

.head-root .logo {
  position: absolute;
  top: 10px;
  left: 20px;
}

.head-root .logo .title {
  color: #ffffff;
  font-size: 20px;
  position: absolute;
  width: 200px;
  padding-left: 5px;
}

.head-root .nav-menu {
  position: absolute;
  left: 300px;
}

.head-root .self {
  position: absolute;
  color: #ffffff;
  font-size: 14px;
  cursor: pointer;
  right: 0px;
  padding: 15px;
  border-radius: 0 15px 15px 0;
}

.head-root .self:hover {
  background-color: #5494d8;
  font-weight: bold;
}
</style>
